<template>
  <view class="custom-tabbar">
    <view
        class="tab-item"
        @click="switchTo('/pages/HomePage/HomePage')"
    >
      <image :src="currentPath === '/pages/HomePage/HomePage' ? selectedHome : home"></image>
      <text>请假申请</text>
    </view>
    <view
        class="tab-item"
        @click="switchTo('/pages/user/user')"
    >
      <image :src="currentPath === '/pages/user/user' ? selectedRecord : record"></image>
      <text>请假记录</text>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'

const home = '/static/home/home.png'
const selectedHome = '/static/home/homeselected.png'
const record = '/static/dingdan/dingdan.png'
const selectedRecord = '/static/dingdan/dingdanselected.png'

const currentPath = ref('')

onLoad(() => {
  // 临时注释有问题的 uni.getCurrentPages 调用，后续再找替代方案
  // const pages = uni.getCurrentPages();
  // if (pages.length > 0) {
  //   currentPath.value = pages[pages.length - 1].route;
  // }
})

const switchTo = (url) => {
  uni.switchTab({ url })
}
</script>

<style scoped>
.custom-tabbar {
  display: flex;
  justify-content: space-around;
  align-items: center;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50px;
  background-color: #fff;
  border-top: 1px solid #eee;
  z-index: 999;
}
.tab-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.tab-item image {
  width: 24px;
  height: 24px;
}
.tab-item text {
  font-size: 10px;
  color: #7A7E83;
}
.tab-item.active text {
  color: #3cc51f;
}
</style>